<!DOCTYPE html >
<html>

	<head>
		<meta charset="UTF-8">

		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var win_h = $(window).height();
				var art_t = 1000;

				var t = art_t - (win_h / 1.5);
				$(window).scroll(function() {
					if($(this).scrollTop() >= t) {
						$(".art ul").addClass("active")
					} else {
						$(".art ul").removeClass("active")
					}

				})

			})
		</script>

		<title>青年帮动画</title>

		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" href="css/new_file14.css" />

	</head>

	<body id="index">

		<!-- header-->
		<header class="top">
			<div class="hd">
				<a href="#" class="logo"><img src="img/12-logo.png" alt="青年帮创意工坊logo" /></a>
				<nav>
					<ul>
						<li>
							<a href="#" class="index">首页</a>
						</li>
						<li>
							<a href="#" class="case">案例展示</a>
						</li>
						<li>
							<a href="#" class="news">最新文章</a>
						</li>
						<li>
							<a href="#" class="bang">帮店助手</a>
						</li>
						<li>
							<a href="#" target="_blank">设计导航</a>
						</li>

					</ul>
				</nav>
				<div class="us">
					关注我们
					<div class="box">
						<ul>
							<li><span>QQ：</span>513894357</li>
							<li><span>Tel：</span>13065018050</li>
						</ul>
						<p><img src="img/12-微信.png" />微信公众号</p>
						<p><img src="img/12-站酷.png" />站酷主页</p>
					</div>
				</div>
			</div>
		</header>

		<article class="content">
			<header>
				<h2>Web art service</h2>
				<h1>为web艺术提供高端服务</h1>
				<p>青年帮创意工坊，提供优秀的设计制作，高端的学习教程，最新的技术分享</p>
				<div class="quxian1 quxian"></div>
				<div class="quxian2 quxian"></div>

			</header>

			<section>
				<ul class="serv">
					<li>
						<a href="#">网页设计</a><img src="img/fuwu_quan_img.png"></li>
					<li>
						<a href="#">网店装修</a><img src="img/fuwu_quan_img.png"></li>
					<li>
						<a href="#">UI设计</a><img src="img/fuwu_quan_img.png"></li>
					<li>
						<a href="#">精品课程</a><img src="img/fuwu_quan_img.png"></li>
				</ul>
			</section>

		</article>

		<div class="art">
			<header>
				<h1>最新文章 <span>&</span> 动态</h1>
				<p>We are here to have the latest original articles and design tutorials and the latest personal views to help you.</p>
			</header>

			<ul>
				<li>
					<div><img src="img/news.png" width="14">最新文章</div>
					<a href="#">做好设计，这三种方法绝对会帮助到你</a><time datetime="">2016-08-19 22:19</time></li>

				<li>
					<div><img src="img/news.png" width="14">最新文章</div>
					<a href="#">dw cs6破解版下载，最详细的dw cs6破解版安装教程</a><time datetime="">2016-07-13 14:48</time></li>

				<li>
					<div><img src="img/news.png" width="14">最新文章</div>
					<a href="#">如何实现网页图片按需滚动分屏无限加载？</a><time datetime="">2015-10-07 12:03</time></li>

				<li>
					<div><img src="img/news.png" width="14">最新文章</div>
					<a href="#">【第2期】平面设计转战网页美工/淘宝美工</a><time datetime="">2015-09-30 23:51</time></li>

				<li>
					<div><img src="img/news.png" width="14">最新文章</div>
					<a href="#">淘宝美工海报制作思路教程1【个人总结：在平面设计与网页设计中积...</a><time datetime="">2015-09-30 16:35</time></li>

			</ul>

		</div>

		
		<div class="copyright">
			Copyright © 2010 - 2018 qingnian8.com All Rights Reserved
		</div>
	</body>

</html>
